<template>
	<view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="基础使用" label-width="550" >
				<template slot='header'>
				</template>
				<g-steps v-model="value1">
					<g-step-item ></g-step-item>
					<g-step-item ></g-step-item>
					<g-step-item ></g-step-item>
					<g-step-item></g-step-item>
				</g-steps>
				<view style="display: flex;flex-direction: row-reverse; margin: 10rpx 0;">
					<g-button type="primary"  size="mini" @handleClick="value1+=1">下一步</g-button>
					<g-button type="info" size="mini" @handleClick="value1-=1" style="margin:0 10rpx;">上一步</g-button>
				</view>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="step-item主题,描述(title,description)" label-width="550" >
				<template slot='header'>
				</template>
				<g-steps v-model="value1" :space='100'>
					<g-step-item title='步骤1' description='描述'></g-step-item>
					<g-step-item title='步骤2' description='描述1212'></g-step-item>
					<g-step-item title='步骤3' description='描述312'></g-step-item>
					<g-step-item title='步骤3' description='描述'></g-step-item>
				</g-steps>
				<view style="display: flex;flex-direction: row-reverse; margin: 10rpx 0;">
					<g-button type="primary"  size="mini" @handleClick="value1+=1">下一步</g-button>
					<g-button type="info" size="mini" @handleClick="value1-=1" style="margin:0 10rpx;">上一步</g-button>
				</view>
			</g-title-wrap>
		</view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="step间距(space)" label-width="550" >
				<template slot='header'>
				</template>
				<g-steps v-model="value1" :space='100'>
					<g-step-item title='步骤1' description='描述'></g-step-item>
					<g-step-item title='步骤2' description='描述1212'></g-step-item>
					<g-step-item title='步骤3' description='描述312'></g-step-item>
					<g-step-item title='步骤3' description='描述'></g-step-item>
				</g-steps>
				<view style="display: flex;flex-direction: row-reverse; margin: 10rpx 0;">
					<g-button type="primary"  size="mini" @handleClick="value1+=1">下一步</g-button>
					<g-button type="info" size="mini" @handleClick="value1-=1" style="margin:0 10rpx;">上一步</g-button>
				</view>
			</g-title-wrap>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:0
			};
		}
	}
</script>

<style lang="scss">

</style>
